import * as React from "react";
import { StyleSheet, View, ViewStyle } from "react-native";
import TagButton from "./TagButton";

interface Props extends React.Props<any>{
  didClickBtnClosure: (content: string) => void;
  style: ViewStyle;
}

interface State {}

export default class ButtonGroup extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        <TagButton
          title={"阿里云"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"RN开发"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"移动APP"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"跨平台移动开发"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"WEB网页设计"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"数据库建模"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"大数据"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"Swift函数式编程"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"服务端架构"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"高性能软件设计"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
        <TagButton
          title={"软件测试"}
          didPressMeClosure={(content: string) => this._clickBtn(content)}
        />
      </View>
    );
  }

  _clickBtn = (content: string) => {
    this.props.didClickBtnClosure(content);
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 20
  }
});
